<template>
    <div class="web-search">
        <div class="p-5 pl-7 pb-4 flex items-center justify-between">
            <div class="text-lg font-bold text-tx-secondary">搜索结果</div>
            <icon
                name="el-icon-CloseBold"
                :size="16"
                class="cursor-pointer"
                @click="emits('close')"
            />
        </div>
        <el-scrollbar>
            <div class="px-5">
                <NuxtLink
                    v-for="(item, index) in lists"
                    :key="index"
                    :to="item.link"
                    :external="true"
                    target="_blank"
                    class="result-item"
                >
                    <div class="flex items-center justify-between">
                        <div class="flex items-center gap-2">
                            <photos
                                v-if="item.icon"
                                :src="item.icon"
                                :width="18"
                                :heigth="18"
                            />
                            <div
                                v-else
                                class="flex items-center justify-center bg-[#e5e5e5] rounded-[50%] w-[18px] h-[18px]">
                                <icon name="el-icon-Link" :size="12" />
                            </div>
                            <span class="text-xs text-tx-regular">
                                {{ item.media }}
                            </span>
                        </div>
                        <span class="number">{{ index + 1 }}</span>
                    </div>
                    <div class="text-lg font-semibold line-clamp-1 mt-1.5">
                        {{ item.title }}
                    </div>
                    <div class="text-sm text-tx-placeholder line-clamp-2 mt-1.5">
                        {{ item.content }}
                    </div>
                </NuxtLink>
            </div>
        </el-scrollbar>
    </div>
</template>

<script lang="ts" setup>
withDefaults(
    defineProps<{
        lists?: any[];
    }>(),
    {
        lists: () => []
    }
)

const emits = defineEmits<{
    (event: 'close'): void
}>()
</script>

<style lang="scss" scoped>
.web-search {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 100px;
    height: 100%;
    border: 1px solid var(--el-border-color-light);
    border-radius: 12px;
    .result-item {
        display: block;
        padding: 8px 10px;
        margin-bottom: 12px;
        border-radius: 12px;
        &:hover {
            cursor: pointer;
            background-color: var(--el-bg-color-page);
        }
    }
    .number {
        display: flex;
        flex-shrink: 0;
        align-items: center;
        justify-content: center;
        height: 20px;
        padding: 0 6px;
        margin-left: auto;
        font-size: 12px;
        font-variant: tabular-nums;
        line-height: 17px;
        color: var(--el-text-color-regular);
        background: #e5e5e5;
        border-radius: 10px;
    }
}
</style>
